<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品优购客户端</title>
    <link rel="stylesheet" href="./品优购项目/css/base.css">
    <link rel="stylesheet" href="./品优购项目/css/same.css">
</head>

<body>
    <!-- 品优购头部 -->
    <div class="box">
        <div class="head">
            <div class="headleft">
                <span>品优购欢迎您！</span>
                <span class="elasticity">
                    <span>请登录</span>
                    <a href="#">免费注册</a>
                </span>
            </div>
            <div class="right">
                <span>我的订单</span>
                <span>|</span>
                <span>我的订单</span>
                <span>|</span>
                <span>我的订单</span>
                <span>|</span>
                <span>我的订单</span>
                <span>|</span>
                <span>我的订单</span>
                <span>|</span>
                <span>我的订单</span>
            </div>
        </div>
    </div>
    <!-- 内容区 -->
    <div class="contentWrap">
        <!-- 导航栏 -->
        <div class="navigationBar">
            <img src="./品优购项目/品优购/images/logo.png" alt="">
            <div>
                <input type="text" placeholder="语言开发"><button>搜索-欢</button>
                <div class="discount elasticity">
                    <span>优惠首购发</span>
                    <span>优惠首购发</span>
                    <span>优惠首购发</span>
                    <span>优惠首购发</span>
                    <span>优惠首购发</span>
                    <span>优惠首购发</span>
                </div>
            </div>
            <div class="shoppingCart">
                <img src="./品优购项目/品优购/images/bao.png" alt="">
                <span class="car">我的购物车</span>
                <span>></span>
                <img class="message" src="./品优购项目/品优购/images/bao.png" alt="">
            </div>
        </div>
        <!-- 图片模块 -->
        <div class="contenttop">
            <div class="all">优惠首购发</div>
            <div class="shopping">
                <span>优惠首购发</span>
                <span>优惠首购发</span>
                <span>优惠首购发</span>
                <span>优惠首购发</span>
                <span>优惠首购发</span>
                <span>优惠首购发</span>
                <span>优惠首购发</span>
            </div>
        </div>
        <!-- 内容身体 -->
        <div class="contentbody">
            <!-- 左边模块 -->
            <div class="left">
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div class="household">
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
                <div>
                    <span>家用电器</span>
                    <span>></span>
                </div>
            </div>
            <!-- 中间 -->
            <img style="margin-top: 21px;" src="./品优购项目/品优购/images/banner_bg.png" alt="">
            <!-- 右边 -->
            <div class="right">
                <div class="more">
                    <span>品优购快报</span>
                    <div>
                        <span style="margin-right: 8px;">更多</span>
                        <span>></span>
                    </div>
                </div>
                <div class="specialOffer">
                    <div>
                        <span>{特惠}</span>
                        <span>备战开学季 全民半价购数码</span>
                    </div>
                    <div>
                        <span>{特惠}</span>
                        <span>备战开学季 全民半价购数码</span>
                    </div>
                    <div>
                        <span>{特惠}</span>
                        <span>备战开学季 全民半价购数码</span>
                    </div>
                    <div>
                        <span>{特惠}</span>
                        <span>备战开学季 全民半价购数码</span>
                    </div>
                    <div>
                        <span>{特惠}</span>
                        <span>备战开学季 全民半价购数码</span>
                    </div>
                </div>
                <div class="phoneBill">
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                    <div>
                        <img style="width: 60px; height: 60px;" src="./品优购项目/品优购/images/bao.png" alt="">
                        <div>话费</div>
                    </div>
                </div>
                <div class="image"></div>
            </div>
        </div>
        <div class="today">
            <div class="shopping">
                <img src="./品优购项目/品优购/images/bao.png" alt="">
                <div>今日推荐</div>
            </div>
            <div class="bag">
                <div class="banner">
                    <img src="./品优购项目/品优购/images/banner_bg.png" alt="">
                </div>
                <div class="banner">
                    <img src="./品优购项目/品优购/images/banner_bg.png" alt="">
                </div>
                <div class="banner">
                    <img src="./品优购项目/品优购/images/banner_bg.png" alt="">
                </div>
                <div>
                    <img src="./品优购项目/品优购/images/banner_bg.png" alt="">
                </div>
            </div>
        </div>
        <div class="priceGroup">
            <div class="magicMirror">
                <img style="margin:0 0 35px 10px" src="./品优购项目/品优购/images/bao.png" alt="">
                <div>暴风魔镜小d 虚拟现实智能vr眼镜</div>
                <div class="price">￥79.00</div>
            </div>
            <div class="powerBank">
                <div class="yoobao">
                    <img src="./品优购项目/品优购/images/bao.png" alt="">
                    <div>
                        <div class="charge">羽博788毫安z3移动电源充电</div>
                        <div class="price">￥139</div>
                    </div>
                </div>
                <div class="yoobao">
                    <img src="./品优购项目/品优购/images/bao.png" alt="">
                    <div>
                        <div class="charge">羽博788毫安z3移动电源充电</div>
                        <div class="price">￥139</div>
                    </div>
                </div>
                <div class="yoobao">
                    <img src="./品优购项目/品优购/images/bao.png" alt="">
                    <div>
                        <div class="charge">羽博788毫安z3移动电源充电</div>
                        <div class="price">￥139</div>
                    </div>
                </div>
                <div class="yoobao">
                    <img src="./品优购项目/品优购/images/bao.png" alt="">
                    <div>
                        <div class="charge">羽博788毫安z3移动电源充电</div>
                        <div class="price">￥139</div>
                    </div>
                </div>
                <div class="yoobao">
                    <img src="./品优购项目/品优购/images/bao.png" alt="">
                    <div>
                        <div class="charge">羽博788毫安z3移动电源充电</div>
                        <div class="price">￥139</div>
                    </div>
                </div>
                <div class="yoobao">
                    <img src="./品优购项目/品优购/images/bao.png" alt="">
                    <div>
                        <div class="charge">羽博788毫安z3移动电源充电</div>
                        <div class="price">￥139</div>
                    </div>
                </div>
            </div>
            <div class="videography">
                <div class="camera">
                    <img style="width: 100px;height: 100px;" src="./品优购项目/品优购/images/bao.png" alt="">
                    <div>
                        <div>
                            <img style="width: 30px;height: 30px;" src="./品优购项目/品优购/images/bao.png" alt="">
                            <span>0807**</span>
                        </div>
                        <div class="chatBox">就受到核辐射不过说不定就换个划水的开发对方不是办法就是就受到核辐射不过说不定就换个划水的开发对方不是办法就是</div>
                    </div>
                </div>
                <div class="camera">
                    <img style="width: 100px;height: 100px;" src="./品优购项目/品优购/images/bao.png" alt="">
                    <div>
                        <div>
                            <img style="width: 30px;height: 30px;" src="./品优购项目/品优购/images/bao.png" alt="">
                            <span>0807**</span>
                        </div>
                        <div class="chatBox">就受到核辐射不过说不定就换个划水的开发对方不是办法就是就受到核辐射不过说不定就换个划水的开发对方不是办法就是</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 品优购底部 -->
    <div class="bottom">
        <div class="bottomContent">
            <div class="invoice">
            <div class="genuineProduct">
                <img style="width: 50px;height: 50px;" src="./品优购项目/品优购/images/bao.png" alt="">
                <div>
                    <div>正品保障</div>
                    <div>正品保障，提供发票</div>
                </div>
            </div>
            <div class="genuineProduct">
                <img style="width: 50px;height: 50px;" src="./品优购项目/品优购/images/bao.png" alt="">
                <div>
                    <div>正品保障</div>
                    <div>正品保障，提供发票</div>
                </div>
            </div>
            <div class="genuineProduct">
                <img style="width: 50px;height: 50px;" src="./品优购项目/品优购/images/bao.png" alt="">
                <div>
                    <div>正品保障</div>
                    <div>正品保障，提供发票</div>
                </div>
            </div>
            <div class="genuineProduct">
                <img style="width: 50px;height: 50px;" src="./品优购项目/品优购/images/bao.png" alt="">
                <div>
                    <div>正品保障</div>
                    <div>正品保障，提供发票</div>
                </div>
            </div>
            <div class="genuineProduct">
                <img style="width: 50px;height: 50px;" src="./品优购项目/品优购/images/bao.png" alt="">
                <div>
                    <div>正品保障</div>
                    <div>正品保障，提供发票</div>
                </div>
            </div>
        </div>
        <div class="guide">
            <ul>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
            </ul>
            <ul>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
            </ul>
            <ul>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
            </ul>
            <ul>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
            </ul>
            <ul>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
                <li>购物指南</li>
            </ul>
            <ul class="shoppingGuide">
                <li>购物指南</li>
                <img style="width: 90px;height: 90px;" src="./品优购项目/品优购/images/bao.png" alt="">
                <li>购物指南</li>
            </ul>
        </div>
        <div class="pageBottom">
            <div class="about">
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
                <span>|</span>
                <span>关于我们</span>
            </div>
            <div>
                地址：混沌复合工艺有人也放到给我发的给我发个噶的后果是多个岗位撒旦韩国
            </div>
            <div>
                改好发给受到广泛受到核辐射大幅广告服务和发改委
            </div>
        </div>
        </div>
    </div>

</body>

</html>